<template>
	<view class="content">
		<view class="top" :style="{paddingTop:menuButtonInfo,backgroundImage:`url(${swiper_bg})`}">
			<view class="address f_j" @click="go('/pages/dl_list/dl_list')">
				<text>{{dl_msg.name}}</text>
				<image src="../../static/public/go_w.png" mode=""></image>
			</view>
			<view class="search f_j" @click="go('/pages/search/search')">
				<image src="../../static/index/ss_icon.png" mode=""></image>
				<text>搜索商品</text>
			</view>
			<!-- <scroll-view scroll-x="true" class="scroll_type ">
				<view class="box">
					<view class="item" v-for="(item,index) in 10" :key="index">
						鸡叉骨
					</view>
				</view>
			</scroll-view> -->
			<view class="swiper">
				<u-swiper radius='30rpx' @click="swiper_click" :list="swiper_list" keyName='image' circular
					height="322rpx" @change="swiper_change"></u-swiper>
			</view>
		</view>

		<!-- 商品专区 -->
		<view class="bottom_box">
			<!-- 系统公告 -->
			<u-notice-bar direction='column' duration='3000' :text="notice" @click="notice_click"
				v-if="notice_data.length>0"></u-notice-bar>
			<view class="menu">
				<swiper indicator-active-color='#FB3C0D' class="swiper_box" :indicator-dots="true" :autoplay="false"
					:interval="3000" :duration="1000">
					<swiper-item v-for="(f_item,f_index) in category_num" :key="f_index">
						<u-grid :border="false" col='5'>
							<!-- @click='item_click' -->
							<u-grid-item v-for="(item,index) in category.slice(10*f_index,(f_index+1)*10)" :key="index"
								:customStyle="{padding:10+'rpx'}">
								<view class="item" @click.stop="item_click(item.index)">
									<image :src="item.image" mode="aspectFill"></image>
									<view class="name f_z">
										{{item.name}}
									</view>
								</view>
							</u-grid-item>
						</u-grid>
					</swiper-item>
				</swiper>
			</view>
			<view class="shop_zq" v-if="theme.length>0">
				<view class="title f_j f_z_b" @click="go('/pages/sp_zq/sp_zq')">
					<view class="">
						商品专区
					</view>
					<view class="all f_j">
						<text>全部</text>
						<image src="../../static/public/go_h.png" mode=""></image>
					</view>
				</view>
				<view class="item">
					<scroll-view scroll-x="true" style="white-space: nowrap;">
						<view style="display: inline-block;margin-right: 20rpx;" class="" v-for="(item,index) in theme"
							:key="index">
							<view class="left f_z_b f_j f_w" :style="{background:item.color}"
								@click="go(`/pages/sp_zq/detail?id=${item.id}`)">
								<view class="text">
									<text class="zq_title">{{item.name}}</text>
									<view class="btn f_zj" :style="{background:item.btn_color}">
										立即选购
									</view>
								</view>
								<image :src="item.image" mode="aspectFill"></image>
							</view>
						</view>
					</scroll-view>
					<!-- <view class="right f_z_b f_j">
						<view class="text">
							<text class="zq_title">烧烤炸串</text>
							<view class="btn f_zj">
								立即选购
							</view>
						</view>
						<image src="../../static/index/menu.png" mode=""></image>
					</view> -->
				</view>
			</view>
			<!-- 分类专区 -->
			<view class="fl_zq">
				<view class="top_check f_z_b">
					<view class="item f_d f_j" v-for="(item,index) in fl_list" :key="index"
						@click="fl_click(index,item.type)">
						<view class="title" :class="{check_title:index==fl_check}">
							{{item.title}}
						</view>
						<view class="tip" :class="{check_tip:index==fl_check}">
							{{item.tip}}
						</view>
					</view>
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="list f_z_b f_w" v-if="goods_list.length>0">
				<commodity v-for="(item,index) in goods_list" :key="index" type='2' :item='item'></commodity>
			</view>
			<view class="empty_p_bot" v-else>
				<u-empty text='没有商品哦~' icon="/static/public/kong.png">
				</u-empty>
			</view>
		</view>
		<!-- 展示店铺弹窗 -->
		<u-popup :show="show" mode='center' round='20rpx'>
			<view class="dl_box f_d f_j">
				<u-avatar :src='dl_msg.image' size="120rpx"></u-avatar>
				<view class="name" v-if="dl_msg.name">
					{{dl_msg.name}}
				</view>
				<view class="dq_dl" @click="dl_check">
					进入此店铺
				</view>
				<view class="qt_dl" @click="go('/pages/dl_list/dl_list')">
					选择其他店铺
				</view>
			</view>
		</u-popup>
		<!-- 展示广告弹窗 -->
		<u-popup :show="gg_show" mode='center' round='20rpx' :safeAreaInsetBottom='false' bgColor='transparent'>
			<view class="gg_box f_d f_j">
				<image class="gg_img" :src="common.index_ad" mode="widthFix" @click.stop="ad_go(common.index_url)">
				</image>
				<image class="gb" src="../../static/public/gg_gb.png" mode="" @click.stop="gg_show=false"></image>
			</view>
		</u-popup>
		<!-- 客服悬浮按钮 -->
		<movable-area class="js_movable">
			<movable-view x="350" y="1000" direction="all" class="js_view f_zj">
				<button open-type="contact" class="f_d f_j kf_btn">
					<image src="../../static/public/kf.png" mode=""></image>
					<view class="">
						客服
					</view>
				</button>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapActions } from 'vuex'
	import { ad_list, ad_click, category_list, theme_list, sy_goods_list, notice_list } from '@/api/page.js'
	export default {
		computed: {
			...mapState(['menuButtonInfo', 'common', 'dl_id', 'dl_msg', 'car_num', 'user_info', 'new_msg_num', 'gg_nums'])
		},
		data() {
			return {
				beasUrl: '',
				swiper_list: [],
				swiper_bg: '',
				fl_list: [
					{ title: '热销产品', tip: '精选好物', type: 1 },
					{ title: '新品上架', tip: '好货尝鲜', type: 2 },
					{ title: '最近降价', tip: '促销好物', type: 3 },
					{ title: '特价专区', tip: '特价精选', type: 4 },
				],
				fl_check: 0,
				category: [], //分类列表
				category_num: 0, //需要的swiper_item个数
				theme: [], //商品专区
				goods_query: {
					dl: '',
					page: 1,
					type: 1
				},
				goods_list: [],
				loadmore: 'more',

				show: false,
				gg_show: false,
				notice: [],
				notice_data: [],
			}
		},
		onShareAppMessage() {

		},
		onLoad() {
			this.beasUrl = this.$beasUrl
			this.goods_query.dl = this.dl_id
			this.get_ad_list()
			this.get_category_list()
			this.get_theme_list()
			this.get_goods()
			this.get_notice()

		},
		onShow() {
			this.have_dl()
			this.car_deg()
			if (!this.$me_scoket.socketOpen) {
				console.log('连接web')
				// 尝试连接webscoket
				this.$me_scoket.init()
			}
		},
		onReachBottom() {
			if (this.loadmore == 'more') {
				this.get_goods()
			}
		},
		watch: {
			dl_id(val, old) {
				this.goods_query.dl = val
				this.goods_query.page = 1
				this.goods_list = []
				this.get_goods()
				// this.get_user()
			},
			new_msg_num(val, old) {
				console.log('修改msg')
				if (val > 0) {
					uni.setTabBarBadge({
						index: 3,
						text: `${val}`
					})
				}
			}
		},
		methods: {
			...mapActions(['get_user']),
			...mapMutations(['set_type_index', 'set_dl_id', 'set_dl_msg', 'set_sessionlist', 'set_gg_nums']),
			fl_click(index, type) {
				this.fl_check = index
				this.goods_query.type = type
				this.goods_query.page = 1
				this.goods_list = []
				this.get_goods()
			},
			// 获取广告位列表
			get_ad_list() {
				ad_list({ url: '/pages/index/index', position: 1 }).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.swiper_list = res.data
						this.swiper_bg = res.data[0].bg_image
					}
				})
			},
			// 点击轮播图
			swiper_click(e) {
				ad_click({ id: this.swiper_list[e].id }).then(res => {
					this.go(this.swiper_list[e].tz_url)
				})
			},
			swiper_change(e) {
				console.log(e)
				this.swiper_bg = this.swiper_list[e.current].bg_image
			},
			// 获取分类列表
			get_category_list() {
				category_list().then(res => {
					if (res.code == 1) {
						this.category = res.data
						let num = res.data.length
						this.category_num = Math.ceil(num / 10)
					}
				})
			},
			// 获取首页商品专区
			get_theme_list() {
				theme_list({ limit: 6, dl: this.dl_id }).then(res => {
					if (res.code == 1) {
						this.theme = res.data
					}
				})
			},
			//获取首页商品列表
			get_goods() {
				sy_goods_list(this.goods_query).then(res => {
					if (res.code == 1) {
						if (res.data.data.length > 0) {
							this.goods_query.page += 1
							this.goods_list = [...this.goods_list, ...res.data.data]
							this.loadmore = 'more'
						} else {
							this.loadmore = 'nomore'
						}
					} else {

					}
				})
			},
			// 点击宫格
			item_click(e) {
				console.log(e)
				this.set_type_index(e)
				uni.switchTab({
					url: `/pages/type/type`
				})
			},
			// 判断本地缓存是否有店铺
			have_dl() {
				let dl_msg = uni.getStorageSync('dl_msg')
				if (!dl_msg) {
					// 缓存没有,展示弹窗
					this.show = true
					this.gg_show = false
				} else {
					this.show = false
					if (this.gg_nums == 0 && this.common.index_ad != '') {
						this.gg_show = true
						this.set_gg_nums(1)
					}
				}
			},
			// 选择店铺
			dl_check() {
				uni.setStorageSync('dl_id', this.dl_id)
				uni.setStorageSync('dl_msg', this.dl_msg)
				this.set_dl_id(this.dl_id)
				this.set_dl_msg(this.dl_msg)
				this.show = false
				this.gg_show = true
				this.set_gg_nums(1)
			},
			// 广告跳转
			ad_go(url) {
				this.gg_show = false
				this.go(url)
			},
			// 获取公告列表
			get_notice() {
				notice_list().then(res => {
					if (res.code == 1) {
						// console.log(res)
						this.notice_data = res.data
						let arr = []
						res.data.forEach(item => {
							arr.push(item.title)
						})
						this.notice = arr
					}
				})
			},
			// 系统公告
			notice_click(e) {
				// console.log(e)
				this.go(`/pages/notice/notice?id=${this.notice_data[e].id}`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.top {
			padding: 0rpx 30rpx;
			padding-bottom: 20rpx;
			// height: 682rpx;
			box-sizing: border-box;
			// background-image: url(../../static/index/top_bg.png);
			background-repeat: no-repeat;
			background-size: cover;

			.address {
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;

				image {
					margin-left: 15rpx;
					width: 9rpx;
					height: 16rpx;
				}
			}

			.search {
				margin-top: 30rpx;
				background: #FFFFFF;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				width: 100%;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				padding: 18rpx 22rpx;
				box-sizing: border-box;

				image {
					margin-right: 20rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}

			.scroll_type {
				margin-top: 30rpx;

				.box {
					white-space: nowrap;

					.item {
						margin-right: 14rpx;
						display: inline-block;
						padding: 4rpx 20rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
						background: #FFFFFF;
						border-radius: 242rpx 242rpx 242rpx 242rpx;
					}
				}
			}

			.swiper {
				margin-top: 30rpx;
			}
		}

		.bottom_box {
			padding: 0rpx 30rpx;
			margin-top: 20rpx;
		}

		.menu {
			margin-top: 20rpx;
			padding: 20rpx 0rpx;
			// margin-top: 30rpx;
			background: #FFFFFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;

			.swiper_box {
				height: 350rpx;
			}

			.item {
				// margin-bottom: 15rpx;

				image {
					width: 96rpx;
					height: 96rpx;
				}

				.name {
					font-weight: 400;
					font-size: 22rpx;
					color: #3D3D3D;
				}
			}
		}

		.shop_zq {
			margin-top: 28rpx;
			background: #FFFFFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			padding: 22rpx;

			.title {
				font-weight: 400;
				font-size: 32rpx;
				color: #3D3D3D;

				.all {
					font-size: 28rpx;
					color: #999999;

					image {
						margin-left: 15rpx;
						width: 28rpx;
						height: 28rpx;
					}
				}
			}

			.item {
				margin-top: 22rpx;

				.zq_title {
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
				}

				.btn {
					margin-top: 30rpx;
					width: 136rpx;
					height: 44rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					border-radius: 334rpx 334rpx 334rpx 334rpx;
				}

				image {
					width: 96rpx;
					height: 92rpx;
				}

				.left {
					width: 312rpx;
					// background: linear-gradient(134deg, #EEBB6A 0%, #F4D091 100%);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					box-sizing: border-box;
					padding: 30rpx;

					.btn {

						background: #E5A744;
					}
				}

				.right {
					width: 312rpx;
					// background: linear-gradient(134deg, #E24848 0%, #F97976 100%);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					box-sizing: border-box;
					padding: 30rpx;

					.btn {
						background: #CD3331;
					}
				}
			}
		}

		.fl_zq {
			margin-top: 30rpx;

			.top_check {
				.item {
					.check_title {
						color: #ED4133 !important;
					}

					.check_tip {
						background: #ED4133;
						border-radius: 374rpx 374rpx 374rpx 374rpx;
						color: #FFFFFF !important;
						padding: 5rpx 15rpx;
					}

					.title {
						font-weight: 400;
						font-size: 28rpx;
						color: #232323;
					}

					.tip {
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
					}
				}
			}
		}

		.list {
			margin-top: 30rpx;
		}

		.dl_box {
			width: 600rpx;
			box-sizing: border-box;
			padding: 30rpx;
			padding-top: 50rpx;

			.name {
				margin-top: 20rpx;
				font-weight: 700;
				font-size: 36rpx;
				color: #3D3D3D;
			}

			.dq_dl {
				margin-top: 36rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				padding: 18rpx 0rpx;
				background: #EE4133;
				border-radius: 126rpx 126rpx 126rpx 126rpx;
				text-align: center;
				width: 500rpx;
			}

			.qt_dl {
				margin-top: 36rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #EE4133;
				padding: 18rpx 0rpx;
				border-radius: 126rpx 126rpx 126rpx 126rpx;
				border: 2rpx solid #EE4133;
				text-align: center;
				width: 500rpx;
			}
		}

		.gg_box {
			width: 600rpx;

			.gg_img {
				width: 600rpx;
			}

			.gb {
				width: 80rpx;
				height: 80rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>